@use "@pythnetwork/component-library/theme";

.priceFeeds {
  @include theme.max-width;

  .header {
    @include theme.h3;

    color: theme.color("heading");
    font-weight: theme.font-weight("semibold");
    margin: theme.spacing(6) 0;
  }

  .body {
    display: flex;
    flex-flow: column nowrap;
    gap: theme.spacing(6);

    .featuredFeeds {
      display: flex;
      flex-flow: row nowrap;
      gap: theme.spacing(1);

      & > * {
        flex: 1;
      }
    }

    .stats {
      display: flex;
      flex-flow: row nowrap;
      gap: theme.spacing(4);
      align-items: center;

      & > * {
        flex: 1;
      }
    }

    .priceFeedId {
      color: theme.color("link", "normal");
      font-weight: theme.font-weight("medium");
    }
  }
}

.priceFeedNameAndIcon,
.priceFeedNameAndDescription {
  display: flex;
  flex-flow: row nowrap;
  gap: theme.spacing(3);
  align-items: center;

  .priceFeedName {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: theme.spacing(1);
    color: theme.color("heading");

    .firstPart {
      font-weight: theme.font-weight("medium");
    }

    .divider {
      font-weight: theme.font-weight("light");
      color: theme.color("muted");
    }

    .part {
      opacity: 0.6;
    }
  }
}

.priceFeedNameAndIcon .priceFeedIcon {
  width: theme.spacing(6);
  height: theme.spacing(6);

  &.skeleton {
    border-radius: theme.border-radius("full");
  }
}

.priceFeedNameAndDescription {
  .priceFeedIcon {
    width: theme.spacing(10);
    height: theme.spacing(10);
  }

  .nameAndDescription {
    display: flex;
    flex-flow: column nowrap;
    gap: theme.spacing(1);

    .description {
      font-size: theme.font-size("xs");
      font-weight: theme.font-weight("medium");
      line-height: theme.spacing(4);
      color: theme.color("muted");
    }
  }
}
